<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/jquery.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<style>
				ul.menu{
					list-style: none;
					display: flex;
					height: 30px;
					background-color: #C6C8CA;
				}
				ul.menu>li{border: 1px solid transparent;
				color:#E8E8E8;
				margin:0 8px;
				height: 30px;
				font-size: 14px;
				position:relative;	
				}
				li:hover{
					border-top:1px solid red;
					background-color: white;
					cursor: pointer;
				}
				ul.menu>li:nth-child(even){
					width: 1px;
					height: 10px;
					background-color: red;
					margin:8px 0px;
					position:relative;
				}
				
				ul.menu>li:nth-child(3)>ul{
					border:1px solid #ccc;
					border-top:0;
					background-color:#fff;
				    opacity: 0;
					
				}
				ul.menu>li:nth-child(3)>ul>li{
				
					
					height:25px; 
					line-height:25px;
				
					width: 60px;
				}
				ul.menu>li:hover>ul{
					opacity: 1;
		</style>
	</head>
	<body>
		<ul>
			<li>女郎加油</li>
			<li>谈谈心</li>
			<li>天天向上</li>
			<li>恨不得</li>
		</ul>
		<div class="container">
			<ul class="menu">
				<li>我的订单</li>
				<li></li>
				<li>我的京东
					<ul>
						<li>女郎加油</li>
						<li>谈谈心</li>
						<li>天天向上</li>
						<li>恨不得</li>
					</ul>
				</li>
				<li></li>
				<li>京东会员</li>
				<li></li>
				<li>企业采购</li>
			</ul>
		</div>
	</body>
</html>